在飛鏢游戲中，紅心非常難以命中，原因在于紅心是整個鏢盤上最小的目標。同樣，推及到觸控設備中時，我們的“目標”大小該如何設定呢？

小按鈕比大按鈕更難于操控。當設計移動界面時，最好把可點擊目標的尺寸做大一點，這樣更利于用戶點擊。但這個“大”究竟需要多“大”，才能方便大多數用戶呢？很多移動開發者也非常想知道這個問題的答案，最后都在各平臺的UI設計規范中找到了答案。

(Image credit:?ogimogi)

移動平臺設計指導規范告訴了我們什么？

在蘋果的《iPhone人機界面設計規范》中指出，最小的點擊目標尺寸是44 x 44像素。微軟的《Windows手機用戶界面設計和交互指南》中建議使用34 x 34像素的尺寸，最小也要26 x 26 像素。諾基亞開發指南中建議，目標尺寸應該不小于1cm x 1cm或者28 x 28 像素。

盡管這些指導規范給我們列舉了各平臺下可點擊目標的尺寸標準，但是彼此的標準并不一致，更無法和人類手指的實際尺寸相一致，他們的建議尺寸比手指的平均尺寸要小，這會影響觸摸屏下對于點擊目標的精準度。

小的點擊目標會導致大問題

可點擊目標尺寸太小，對于用戶體驗來說就非常糟糕，因為如果要更精確的觸控。用戶需要調整手指的操作方式，從指心操作，變為指尖操作，這樣才能操作尺寸較小的目標。使用指心操作通常會整個覆蓋操作對象，讓用戶無法分辨他們所要操作的目標，也無法收到操作過程中的視覺反饋，也就無法知曉，他們的操作是否有效。當用戶不得不用指尖進行操作時，又出現了一個新問題，這種操作方式非常的慢，而且很吃力，體驗很差。

問題不僅這些，目標的尺寸過小還會導致失誤的觸摸操作。因為尺寸小，所以容易擁擠在一起，用戶容易觸碰到附近的目標，導致運行結果非用戶所愿。手指太大，目標尺寸太小，一根手指的寬度大概能覆蓋兩個目標的寬度。如果不按壓到錯誤的位置，就會導致錯誤的操作。食指容易出錯，但是拇指更容易出錯。因為拇指更大、更笨拙。有時候用戶會傾斜拇指，使用拇指的側邊進行操作，但是目標尺寸過小，依然失誤頻繁。

在移動用戶的日常操作中，拇指的使用非常頻繁。有時用戶無法騰開兩只手操作，只能用一只手握住手機，用拇指和食指操作。在這種場景下，用戶的操作精度有限，就需要提高目標尺寸來避免操作錯誤，這就是所謂的友好的觸控體驗。

食指操作下的平均像素寬度

MIT觸摸實驗室的做了一項研究，以手指指尖作為調查，分析其感覺機能。研究發現，成年人的食指寬度一般是1.6——2 cm。轉換成像素就是45——57 px，這比那些指導書上建議的寬度都要寬。

45——57 px的目標尺寸非常夠用，用戶可以將整個手指緊貼在目標上。在操作的過程中，用戶也能看到目標的邊緣。這樣用戶與控制對象之間的反饋與信息傳達變的非常清晰，用戶也能知曉他們的操作是否有效。因為尺寸大，定位更快，拖移也更方便。費茨法則中提到過，目標越小，操作耗時就越長。小目標減慢了用戶的操作速度，因為需要用戶集中精力去精準定位。手指大小的目標則不一樣，這種目標給予用戶足夠的空間操作，容錯率也很高。

拇指操作情況下的像素寬度

也有很多用戶用拇指敲擊屏幕上的目標。拇指比食指要寬，平均寬度大概在2.5cm，轉換成像素是72 px。

72像素的實際使用效果很棒，更容易定位、操作的舒適感更好。同樣可以看到操作目標的邊緣。這意味著用戶不用費力的調整手指，使用指尖去操作了。也不用傾斜拇指，用拇指側面點擊目標。

在《小型觸摸設備上單手操作研究：關于拇指操作的目標尺寸》這篇文章中發現，目標尺寸的增加會降低失誤操作的次數。更多的空間提供了更高的容錯率和更精確的操作，同時因為大型的尺寸，目標的表現力也變強。

另外一篇《移動端觸摸設計：關于目標選擇的關鍵》中也表達了同樣的看法。

手指大小的目標尺寸很理想，但也有特殊情況

將目標尺寸的大小，設置為跟手指大小相近，其中的好處不再贅述。但并不是適合所有的設計場景。在移動設備上，空間有限。這就意味著，如果每個目標的大小都很大，那么屏幕空間根本不夠，就需要不斷的翻頁，這在體驗上很糟糕。你需要測量屏幕尺寸，然后計算比例，搞清楚“在這種尺寸的屏幕上，合適的、最大的目標尺寸是多少？”倘若你按照手指大小進行尺寸調整，整個界面的比例很糟糕；再次按照比例調整后，最大的目標尺寸效果也不假，那么就只能使用指導規范上的建議尺寸了。

對于平板設備來說，情況就沒有手機那么復雜，因為平板的空間更多。不用害怕沒有空間去放置點擊目標，空間足夠，你可以非常悠然的通過提高尺寸來提高操作適用性。手機是最麻煩的，點擊目標的尺寸非常不好拿捏。但正是因為手機的空間有限，容易操作失誤，所以才需要設置真實手指大小的目標尺寸。設計師的挑戰就在于，要想辦法，讓屏幕上大多數的目標，尺寸都跟手指大小一致。但也有好處，這迫使設計師設計時更注重功能性、風格更加極簡。

為游戲應用設計拇指大小的點擊對象

我們無法推測的問題是，用戶使用你的應用時，是用食指操作更多？還是用拇指更多？因此，針對這一點，我們要非常細致的做調研，然后設置合理的目標尺寸。 然而，如果你的應用是一款游戲的話，大多數用戶會使用拇指。這就是為什么很多游戲應用中，一些控件的尺寸一般有拇指那么大，這樣用戶就能更穩固的雙手持握，更精準的操作。

Gyro13 Steam Copter Arcade?has larger touchscreen targets

結論

通過調整目標尺寸的大小，結合實際的應用情況，能夠有效的提高移動端的適用性，同時提高用戶體驗。不管你的應用是游戲還是別的什么。觸摸屏上的目標就是用來讓用戶點擊的。如果用戶需要去想“我該怎樣去點擊，才能完成精確的操作”，需要再交互前思考方法，需要調整操作方法，使用多種方法才能完成交互。這說明這款產品的交互設計是糟糕的。在這篇文章里，我拋出了個人的一些觀點，在觸摸即將成為操作方式的一統時代，如何打造友好的觸控體驗？這是我們將要面臨的問題。期待更多的想法，以及更規范的標準。

感謝閱讀！

原文地址：smashingmagazine
翻譯：優設番茄醬?@SKYUI

 
================關于優設網================
"優設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
設計講座：每月邀請國內互聯網公司設計前輩及行業總監在群內及YY語音（YY頻道：15335158）分享實戰經驗。
設計微博：擁有粉絲量45萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：